被問的一題示範我的拆題方式

系列：前端面試的 30 個為什麼——從 JavaScript 機制講到 React 實戰
難度：★★☆☆☆
關聯：本篇是全系列的起點，第 20 到 27 天的 React 與 Next.js 篇會回頭引用這裡的「變更偵測」比較表。

一、這是什麼（一句話）

一句話該多長

先回答一個很實際的問題：面試時的「一句話」到底要多長？

我的標準是 15 到 40 個字，一口氣念得完，中間不用換氣。超過 40 個字，你自己講到一半會開始想「我剛剛講到哪」，面試官也會失焦。

驗收方式很簡單：唸出來，如果需要換氣，就是太長了。

實際示範。我原本寫的版本是這樣：

React 是前端三大函式庫跟框架之一，由 Facebook 的 React 團隊開發，主要採取虛擬 DOM 的機制更新畫面，現在都是函式型元件，生命週期的觀念跟純函式、不可變的特性尤為重要。

這段有 79 個字，塞了五個資訊點：定位、開發者、Virtual DOM、函式型元件、純函式與不可變。問題不在講錯，而在它把後面三題的答案一次講完了，面試官接不下去，你也沒有梗可以往下鋪。

壓縮成一句話：

React 是 Meta 開發的 UI 函式庫，核心是把畫面寫成狀態的函數，你只描述畫面長什麼樣，更新的事情交給它做。

38 個字。剩下的「Virtual DOM」「不可變」「函式型元件」全部留到第三步再放，這樣你有東西可以繼續講，而且是被追問著講，不是自己硬塞。

三個框架各一句

• React：Meta 開發的 UI 函式庫，把畫面寫成狀態的函數，你描述畫面，它負責更新。
• Vue：漸進式框架，用響應式資料自動追蹤誰用了什麼，資料一變就只更新用到它的地方。
• Angular：Google 開發的完整框架，從路由、表單到依賴注入全部內建，走約定優於配置。
  三句話的長度刻意做得差不多，因為面試被要求「比較一下」的時候，最好的開場就是三句對仗的定義，聽起來立刻像有整理過。

二、用在哪

定義背得再熟，講不出落點就是紙上談兵。

• React：需求變動快、UI 高度客製、團隊想自己選狀態管理與路由的專案。加上 React Native、React Three Fiber、Ink 這些延伸，「學一次 React，寫 Web、App、3D、CLI」是它最實際的賣點。
• Vue：中小型專案、需要快速上手、或是要把互動掛在既有的後端樣板（Laravel、Rails、Django）上。漸進式的意思就是可以只用一頁，不用整站重寫。
• Angular：大型企業內部系統、金融後台、多團隊長期維護的專案。內建的東西多，代表新人進來看到的架構長得一樣，不會每個專案自成一格。
  一句話總結這段：React 給你自由，Angular 給你規範，Vue 給你速度。

三、怎麼運作（可深可淺）

淺的版本

三個框架都在解同一個問題：資料變了，畫面怎麼跟著變？

差別只在兩件事：

• a. 它怎麼知道資料變了？
• b. 知道以後，它怎麼算出要改畫面的哪一塊？

深的版本：三種變更偵測策略

React：你要主動告訴它

React 本身不知道你的資料變了。你呼叫 setState，它才知道。知道之後它做的事情是：

1. 重新執行這個元件函式，以及底下沒被擋住的子元件。
2. 產出一棵新的 Virtual DOM 樹。
3. 跟上一棵比對（Reconciliation 調和）。
4. 把差異一次刷進真實 DOM。
   這是粗粒度的：改一個 state，整個子樹的函式都會重跑一次。所以才需要 memo、useMemo、useCallback 去擋。

值得注意的是 React Compiler 在 2025 年 10 月推出 v1.0 穩定版，它會在編譯期自動幫你插入 memo 化，這一題的答案已經跟兩年前不一樣了。面試講到這裡如果你能補一句「不過 Compiler 穩定之後，手動 memo 的必要性下降很多」，會很加分。

Vue：它自己知道

Vue 3 用 Proxy 攔截屬性存取，在元件 render 的時候記下「這個元件讀了哪些資料」。資料一改，它直接知道要重跑哪個元件，不用從根往下找。

再加上編譯期的三個優化：

• Static Hoisting：靜態節點提到 render 函式外面，只建一次。
• Patch Flags：編譯時就標記「這個節點只有 class 會變」，執行期只比對那個屬性。
• Block Tree：把動態節點收集成扁平陣列，diff 直接跳過整片靜態內容。
  Vue 3.6 的 Vapor Mode 更進一步，直接把 Virtual DOM 拿掉，編譯成直接操作 DOM 的指令，路線跟 Solid.js 一樣。所以「Vue 有 Virtual DOM」這句話在 2026 年已經要加註解了。

Angular：從髒檢查走到訊號

• AngularJS 1.x：Dirty Checking 髒檢查。把所有綁定的值存一份舊的，事件結束後整份掃一遍比對。這個版本已經在 2022 年 1 月終止支援，面試講它只能當歷史，不能拿來當「我不選 Angular 的理由」。
• Angular 2 以後：Zone.js 攔截所有非同步 API（setTimeout、事件、XHR），只要有非同步結束就觸發整棵元件樹的變更偵測，靠 OnPush 策略剪枝。Ivy 引擎（v9 起預設）改用 Incremental DOM，把每個元件編譯成自己的指令，好處是可以 tree-shaking，記憶體佔用低。
• 現在（v16 之後）：Signals 訊號。跟 Vue 的響應式概念同源，但更顯式。搭配 zoneless 模式，Angular 終於可以拿掉 Zone.js，做到節點級別的精準更新。

三種策略橫向擺一起

四、跟其他做法比（優缺點橫向比較）

綜合比較表

React 真正的優點（可以放心講）

• a. JSX 就是 JavaScript。條件判斷用三元運算子，迴圈用 .map()，不用另外學 v-if、v-for 這套 DSL。當元件要接收「一段可變的 UI」當參數時，直接傳一個函式或元素進去，比 Slot 的宣告推導直覺。
• b. TypeScript 支援是原生等級。元件就是回傳 JSX 的函式，props 就是一個物件型別，泛型元件、型別收窄全部照 TS 原本的規則走，不需要額外的語言服務去解析範本。
• c. 生態系的橫向遷移成本最低。同一套心智模型可以寫 React Native、React Three Fiber、Ink。這不是「套件比較多」而已，是「同一套知識能用在不同平台」。
• d. 顯式資料流在多人協作時比較好追。setCount(prev => prev + 1) 囉唆，但你 grep 得到所有改動點。

React 真正的缺點（誠實承認，反而加分）

• a. 預設效能不好，要靠 memo 化人工補。React Compiler 穩定後改善很多，但這正好證明「這件事本來是痛點」。
• b. 樣板代碼多。同樣的表單雙向綁定，Vue 一個 v-model 就結束。
• c. 選型疲勞。路由、狀態管理、表單、資料請求全都要自己挑，新人進不同專案等於重學。
• d. useEffect 是最容易寫錯的 API，過期閉包、依賴陣列漏填造成的 bug 佔了新手一半的問題。這題我會在第 21 天單獨寫一篇。

幾個常見說法，我建議你不要照搬去面試

我自己整理資料時看到不少論點，聽起來很順，但只要面試官剛好熟另一個框架，就會被追問到說不下去：

• 「React 把 UI 約束成純函數 UI = f(props, state)」——這是理想模型不是實作事實。useEffect、useRef、Context、Server Components 全都是這個公式外的東西。可以講「React 鼓勵你往這個方向寫」，但不要說成「React 保證如此」。
• 「Vue 的範本讓組件化沒 React 好用」——太強了。Vue 的 Slot 涵蓋絕大多數組合情境，而且 Vue 本來就支援 JSX。改成「在傳遞高度動態的 UI 參數時，我個人覺得直接傳 JSX 比 Slot 好推導」，這是偏好，站得住。
• 「Vue 的 TS 要靠外掛二次解析」——現況是 Vue Language Tools 與 vue-tsc 已經相當成熟。差距在縮小，講成硬傷會顯得你資訊停在幾年前。
• 「AngularJS 用髒檢查所以效能差」——這是在打一個已經 EOL 的版本。現在講 Angular 就是講 Signals 與 zoneless，拿 1.x 出來比會被認為沒跟上。
• 「Vue 有 Virtual DOM 所以跟 React 差不多」——Vue 3.6 的 Vapor Mode 正在把 Virtual DOM 拿掉，這句話的有效期正在過去。

五、那要怎麼回答「你為什麼選 React」

30 秒版

我選 React 主要是兩個理由。第一，JSX 就是 JavaScript，我的 UI 邏輯不用學另一套範本語法，TypeScript 的推導也是原生等級。第二，生態系可以橫向遷移，同一套心智模型可以寫 Web 也可以寫 React Native。至於效能，React 預設確實比 Vue 和現在的 Angular 吃虧，這點我不會硬拗。

90 秒版（被要求展開時）

在 30 秒版後面接：

如果單看變更偵測，React 是三者裡最粗的。它不知道資料變了，要我呼叫 setState 告訴它，然後整個子樹重跑。Vue 用 Proxy 自動追蹤依賴，加上編譯期的 Patch Flags，能把 diff 範圍壓得很小；Angular 走 Signals 加 zoneless 之後可以精準到節點。所以效能這一項，我認為 React 是靠 React Compiler 在補，而不是天生就贏。

我還是選 React，是因為我這個專案的瓶頸不在 render 效能，而在需求變動速度和一個人維護的成本。React 的自由度讓我能只裝我需要的東西，生態系又夠大，遇到問題找得到現成解法。如果今天是一個十幾個人、要維護五年的企業後台，我會認真考慮 Angular，因為它的規範性正好解決那個情境的痛。

被追問「那你為什麼不用 Vue」

不要講「Vue 不好」。講你的取捨：

Vue 我認為在中小型專案上開發速度是贏的。我選 React 是因為我想把時間投在 JavaScript 本身，而不是框架語法上。JSX 學會了，等於我的 JS 能力可以直接變現；Vue 的範本語法學再熟，換框架時帶不走。這是我的個人押注，不是說 Vue 有問題。

六、寫給比較完之後開始動搖的自己

整理到最後我一度很卡：Angular 現在 zoneless 又省記憶體，Vue 又簡潔又要拿掉 Virtual DOM，那我去面 React 的職缺，要怎麼「信心十足」？

後來我想通一件事：面試官不是要你證明 React 客觀上最強，他是要看你知不知道自己放棄了什麼。

會被扣分的答案是「因為 React 最好」「因為大家都用」。這代表你沒比較過。

會被加分的答案是「React 在效能預設值上不如另外兩個，但我這個場景的瓶頸不在那裡，我選它是為了 X，代價是 Y，這個代價我承受得起」。這代表你做過技術選型，而不是被公司選型推著走。

換句話說，你現在的動搖不是弱點，是素材。真正沒比較過的人，連動搖的機會都沒有。

參考來源與查閱時間

• React 官方版本頁（最新穩定版 19.2.x；React Compiler v1.0 於 2025 年 10 月穩定），https://react.dev/versions ，查閱於 2026-08-14
• Angular 變更偵測現況（Signals 與 zoneless），https://angular.love/the-latest-in-angular-change-detection-zoneless-signals ，查閱於 2026-08-14
• Vue 3.6 Vapor Mode 進度說明，https://certificates.dev/blog/vapor-mode-in-practice ，查閱於 2026-08-14
• AngularJS 1.x 已於 2022 年 1 月終止長期支援，https://en.wikipedia.org/wiki/AngularJS ，查閱於 2026-08-14

明天預告

Day 2 講傳值與傳址（call by sharing）。這題看起來是基礎題，但它直接決定了你在 React 裡改 state 為什麼「改了卻沒重新渲染」，會跟第 20 天的 Object.is 那篇串在一起。